<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .banner{width:400px;position: relative;height:120px;margin: 0 auto;overflow: hidden;}
        .banner .imgbox{width:2400px;position: absolute;left:0;}
        .banner .imgbox img{width:400px;height:120px;float: left;}
        .banner .btns input{position: absolute;width:30px;height:30px;top:45px;}
        .banner .btns #left{left:0}
        .banner .btns #right{right:0}
    </style>
</head>
<body>
    <div class="banner">
        <div class="imgbox">
            <img src="./imgs/banner1.jpg" alt="">
            <img src="./imgs/banner2.jpg" alt="">
            <img src="./imgs/banner3.jpg" alt="">
            <img src="./imgs/banner4.jpg" alt="">
            <img src="./imgs/banner5.jpg" alt="">
            <!-- 无缝1：将第一张图复制，放在最后一张图后，用于做过渡使用 -->
            <img src="./imgs/banner1.jpg" alt="">
        </div>
        <div class="btns">
            <input type="button" name="" id="left" value="<">
            <input type="button" name="" id="right" value=">">
        </div>
    </div>
</body>
<script src="../move.js"></script>
<script>
    function Banner(){
        this.left = document.querySelector("#left");
        this.right = document.querySelector("#right");
        this.imgbox = document.querySelector(".imgbox");
        this.imgs = document.querySelectorAll(".imgbox img");
        this.index = 0;
        this.addEvent();
    }
    Banner.prototype.addEvent = function(){
        const that = this;
        this.right.onclick = function(){
            that.changeIndex();
        }
        this.left.onclick = function(){
            that.leftChangeIndex();
        }
    }
    Banner.prototype.leftChangeIndex = function(){
        if(this.index === 0){
            // 无缝2-2：将索引修改为真正要显示图片的索引
            this.index = this.imgs.length-2;
            // 无缝3-2：将imgbox的位置设置为最后一张向前一张移动之前的初始位置：-(length-1) * 任一图片宽度
            this.imgbox.style.left = -(this.imgs.length-1) * this.imgs[0].offsetWidth + "px";
        }else{
            this.index--
        }
        this.changeImg();
    }
    Banner.prototype.changeIndex = function(){
        if(this.index === this.imgs.length-1){
            // 无缝2-1：将索引修改为真正要显示图片的索引
            this.index = 1;
            // 无缝3-1：将imgbox的位置设置为第1张向第2张移动之前的初始位置：0
            this.imgbox.style.left = 0;
        }else{
            this.index++;
        }
        this.changeImg();
    }
    Banner.prototype.changeImg = function(){
        move(this.imgbox, {
            left: -this.index * this.imgs[0].offsetWidth
        })
    }
    new Banner();
    
    
</script>
</html>